<template>
  <div class="block-page">
    <div class="block-page__item" v-for="item in 5" :key="item">
      <p>18907.6</p>
      <p class="item-text">总听课时长(小时)</p>
    </div>
  </div>
  <p class="outer-title pd-bottom--32 pd-top--32">听评课名单</p>

  <a-tabs v-model:activeKey="activeKey" @change="navTab">
    <a-tab-pane :key="index" :tab="item" v-for="(item, index) in classType"></a-tab-pane>
  </a-tabs>
  <div class="draw-center none-border">
    <p class="draw-title--tab">数据时间：</p>
    <a-button class="mg-right--12" @click="chooseDay(7)">近7天</a-button>
    <a-button class="mg-right--12" @click="chooseDay(30)">近30天</a-button>
    <a-range-picker v-model:value="valueDate" @change="chooseTime" />
  </div>
  <dynamic-table ref="tableRef" :columns="columns" :get-list-func="loadData" rowKey="id">
    <template #index="{ record, index }">{{ index + 1 }}</template>
    <template #go="{ record }">
      <!-- @click="$router.push(`/user/sub?userId=${record.userId}`)" -->
      <div class="flex-table">
        <p class="mr-8" style="width: 30px">{{ record.score }}</p>
        <div class="score-scale" style="width: 100px">
          <div
            class="score-scale--progress"
            :style="{ width: (record.score / 100) * 80 + 'px' }"
          ></div>
        </div>
      </div>
    </template>
    <template #listen="{ record }">
      <!-- @click="$router.push(`/user/sub?userId=${record.userId}`)" -->
      <div class="flex-table">
        <p class="mr-8" style="width: 30px">{{ record.score }}</p>
        <div class="score-scale" style="width: 100px">
          <div
            class="score-scale--progress"
            :style="{ width: (record.score / 100) * 80 + 'px', background: '#FE606D' }"
          ></div>
        </div>
      </div>
    </template>
    <template #action="{ record }">
      <!-- @click="$router.push(`/user/sub?userId=${record.userId}`)" -->
      <div class="flex-table">
        <p class="mr-8" style="width: 30px">{{ record.score }}</p>
        <div class="score-scale" style="width: 100px">
          <div
            class="score-scale--progress"
            :style="{ width: (record.score / 100) * 80 + 'px', background: '#49F756' }"
          ></div>
        </div>
      </div>
    </template>
  </dynamic-table>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getCourseAssessTime } from '@/api/data/index'
  import { getIndexList } from '@/api/listen'
  import { columns } from './columns'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      DynamicTable,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryparam: {
          day: null,
          scoreDay: null,
        },
        currTitle: 1,
        activeKey: 0,
        classType: ['校领导', '院领导', '督导组'],
        allCompaniesDetail: [] as any,
        nav: [
          { id: 0, name: '近7天', active: true },
          { id: 1, name: '近30天', active: false },
          { id: 2, name: '近180天', active: false },
        ],
        list: [
          { id: 0, name: '全部', type: 0, active: true },
          { id: 1, name: '听课', type: 0, active: false },
          { id: 2, name: '评课', type: 0, active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */
      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryparam }
        return getIndexList(myParams)
      }

      const navTab = (ev) => {
        state.activeKey = ev
      }

      // 选择天
      const chooseDay = (item) => {
        state.queryparam.day = item
      }
      // 联动日期
      const chooseTime = (ev) => {
        valueDate.value = ev
      }

      // 选择课程状态
      const choose = (item) => {
        state.list.map((v) => {
          v.id === item.id ? (v.active = true) : (v.active = false)
        })
      }

      const tabChange = (ev) => {
        state.nav.map((v) => (v.id === ev.id ? (v.active = true) : (v.active = false)))
      }

      const titleTab = (ev) => {
        state.currTitle = ev
      }

      return {
        ...toRefs(state),
        tableRef,
        tabChange,
        valueDate,
        chooseDay,
        chooseTime,
        choose,
        navTab,
        loadData,
        columns,
        titleTab,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .flex-table {
    display: flex;
    align-items: center;
  }
</style>
